@import config

// CUSTOM USER STYLES & IMPORTS
*
  box-sizing: border-box

body
  background-image: url("../images/bg-top.svg"), url("../images/bg-bottom.svg")
  background-repeat: no-repeat
  background-position: 100% 0, 0 100%
  background-color: $colorVLBlue

.container
  height: 100vh
  display: grid
  grid-template-columns: 1fr
  grid-template-rows: 100px 100px 1fr
  justify-items: center
  align-items: center
  .main_container--title
    margin-top: 6%
  .main_container--checkbox
    color: $colorGBlue
    display: flex
    align-content: center

.price
  width: 350px
  height: 450px
  border: 1px solid $colorLightBlue
  display: inline-grid
  justify-items: center
  color: $colorGBlue
  background-color: $colorVLBlue
  position: relative
  padding:
    top: 35px
    bottom: 30px
  &:first-child
    border-radius: 10px 0 0 10px
    right: -1px
  &:last-child
    border-radius: 0 10px 10px 0
    left: -1px
  div
    display: grid
    justify-content: center
    align-content: center
    border-top: 1px solid $colorLightBlue
    width: 80%

.money
  font-size: 4rem
  position: relative
  > span
    height: 65px
    font-size: 2.3rem
    position: absolute
    top: 20%
    left: -15%


//.price_title
//  display: flex
//  justify-self: center

.main_container--price
  display: grid
  grid-template-columns: repeat(3, 1fr)
  align-items: center

main
  margin-bottom: $gutter

.price--button
  width: 80%
  text-transform: uppercase
  border: 1px solid $colorVLBlue
  border-radius: 5px
  color: $colorVLBlue
  background: linear-gradient(to right, $colorGradient1, $colorGradient2)
  &:hover
    color: $colorGradient2
    background: $colorVLBlue
    border: 1px solid $colorGradient2

.price_active
  color: $colorVLBlue
  height: 500px
  border-radius: 10px
  background: linear-gradient(to right, $colorGradient1, $colorGradient2)
  padding:
    top: 60px
    bottom: 55px
  z-index: 1
  .price--button
    background: $colorVLBlue
    color: $colorGradient2
    &:hover
      color: $colorVLBlue
      border: 1px solid $colorVLBlue
      background: linear-gradient(to right, $colorGradient1, $colorGradient2)

input[type="checkbox"]#main--checkbox
  font-size: 30px
  appearance: none
  width: 3.75rem
  height: 1.875rem
  background: linear-gradient(to right, $colorGradient1, $colorGradient2)
  border-radius: 3rem
  position: relative
  cursor: pointer
  outline: none
  margin:
    left: 10px
    right: 10px
  &:checked
    background: $colorGradient1
    &::after
      left: calc(100% - 1.875rem)

input[type="checkbox"]#main--checkbox::after
  position: absolute
  content: ""
  width: 1.875rem
  height: 1.875rem
  border-radius: 50%
  background: $colorVLBlue
  left: 0
  transform: scale(.7)
  transition: all .2s ease-in-out